 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			/*table{
				height: 500px;
				width: 1000px;
			}*/
			table tr td{
				text-align: center;
				width: 200px;
				height: 80px;
			}
			input[type=text]{
				width: 50px;
			}
			input[type=button]{
				width: 60px;
			}
			.add{
				height: 200px;
				width: 150px;
				border: 3px solid #999999;
				margin-top: 10px;
				margin-left: 10px;
				float: left;
			}
			.add h1{
				text-align: center;
				color: red;
				font-size: 20px;
			}
			.add p{
				text-align: center;
				line-height: 30px;
			}
			.add input[type=button]{
		     margin-left:35px ;
		     margin-top: 10px;
			}
			.bao{
				height: 200px;
				width: 150px;
				border: 3px solid #999999;
				margin-top: 10px;
				margin-left: 10px;
				float: left;
			}
			.bao h1{
				text-align: center;
				color: red;
				font-size: 20px;
			}
			.bao p{
				text-align: center;
				line-height: 30px;
			}
			.bao input[type=button]{
		     margin-left:35px ;
		     margin-top: 10px;
			}
			.btn{
				height: 130px;
				width: 150px;
				border: 3px solid #999999;
				margin-top: 10px;
				margin-left: 10px;
				float: left;
			}
		    .btn input[type=button]{
		     margin-left:40px ;
		     margin-top: 10px;
			}
			.btn input[type=text]{
			margin-left:40px ;
		     margin-top: 10px;
			}
			.imgs{
				height: 130px;
				width: 800px;
				border: 3px solid #999999;
				margin-top: 10px;
				margin-left: 10px;
				float: left;
			}
			.imgs ul li{
				float: left;
				margin-top: 10px;
			}
			.p0{
				height: 50px;
				width: 50px;
				border: 1px solid #999999;
			margin-left:55px;
			}
			.p0 img{
				height: 50px;
				width: 50px;
			
			}
			#a1{
				color:red;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0">
	    <thead>
			<tr>
				<td></td>
				<td>图片</td>
				<td>产品</td>
				<td>单价</td>
				<td>数量</td>
				<td>总价</td>
				<td>删除</td>
				<td>修改</td>
			</tr>
		</thead>
		<tbody>
			<tr><td><input type="checkbox"></td><td><img src="pro/p0.png"/></td><td>汽车</td><td>200</td><td><input type="button" value="-" onclick="jian(this)"/><input type="text" value="1"><input type="button" value="+" onclick="jia(this)"/></td><td><input type="text" id="a1"/></td><td><input type="button"  value="删除" onclick="del(this)"/></td><td><input type="button"  value="修改" onclick="gai(this)"/></td></tr>
			
			<tr><td><input type="checkbox"></td><td><img src="pro/p1.png"/></td><td>手表</td><td>200</td><td><input type="button" value="-" onclick="jian(this)"/><input type="text" value="1"><input type="button" value="+" onclick="jia(this)"/></td><td><input type="text" id="a1"/></td><td><input type="button"  value="删除" onclick="del(this)"/></td><td><input type="button"  value="修改" onclick="gai(this)"/></td></tr>	
			<tr><td><input type="checkbox"></td><td><img src="pro/p2.png"/></td><td>电话</td><td>200</td><td><input type="button" value="-" onclick="jian(this)"/><input type="text" value="1"><input type="button" value="+" onclick="jia(this)"/>
			</td><td><input type="text" value="" id="a1"/></td><td><input type="button"  value="删除" onclick="del(this)"/></td><td><input type="button"  value="修改" onclick="gai(this)"/></td></tr>	
		</tbody>	
		</table>
		<div class="add">
			<h1>添加商品</h1>
			<p class="p0"><img></p>
			<p class="p1">品名：<input type="text" /></p>
			<p class="p2">单价：<input type="text" /></p>
			<input type="button"  value="添加"/>
		
		</div>
		<div class="bao">
			<h1>修改商品</h1>
			<p class="p0"><img></p>
			<p>品名：<input type="text" /></p>
			<p>单价：<input type="text" /></p>
			<input type="button"  value="保存"/>
		
		</div>
		<div class="btn">
			<input type="button"  value="全选"/>
			<input type="button"  value="反选"/>
			<input type="button"  value="总价"/>
			<input type="text" />
		</div>
		<div class="imgs">
			<ul>
				<li> <img src="pro/p0.png"></li>
				<li><img src="pro/p1.png"></li>
				<li><img src="pro/p2.png"></li>
				<li><img src="pro/p3.png"></li>
				<li><img src="pro/p4.png"></li>
				<li><img src="pro/p5.png"></li>
			</ul>
		</div>
		<script src="jquery.js"></script>
		<script type="text/javascript">
//		删除
        var log=console.log;
        function del(input){
        	input.parentNode.parentNode.remove()
        }
//      添加商品 
      var add=document.querySelector('.add input[type=button]')
      add.onclick=function(){
      	  var tu=document.querySelector('.p0').innerHTML
      	  var ming=document.querySelector('.p1 input').value
      	  var jia=document.querySelector('.p2 input').value
      
      	 var table=document.querySelector('table tbody')
      	var  str='<tr><td><input type="checkbox"></td><td>'+tu+'</td><td>'+ming+'</td><td>'+jia+'</td><td><input type="button" value="-" onclick="jian(this)"/><input type="text" value="1"><input type="button" value="+" onclick="jia(this)"/></td><td><input type="text" id="a1"/></td><td><input type="button"  value="删除" onclick="del(this)"/></td><td><input type="button"  value="修改" onclick="gai(this)"/></td></tr>'
   	    table.insertAdjacentHTML('beforeend',str)
   	    zong()
      	
		} 
  //点击添加图片 
	   var imgs=document.querySelectorAll('.imgs ul li img')
		var arr=["p0.png","p1.png","p2.png","p3.png","p4.png","p5.png"]
		imgs.forEach(function(a,b){
		a.onclick=function(){
			    var p0=document.querySelector('.add .p0')
			    var img='<img src="pro/'+arr[b]+'">'
			    p0.innerHTML='<img src="pro/'+arr[b]+'">'
			}
		})
  
		
		
//点击修改
	 function gai(input){
   	 var trs=input.parentNode.parentNode
   	var td1=trs.childNodes[1]
   	var td2=trs.childNodes[2]
   	var td3=trs.childNodes[3]
     var p0=document.querySelector('.bao .p0')
    var p1=document.querySelectorAll('.bao input[type=text]')[0]
     var p2=document.querySelectorAll('.bao input[type=text]')[1]
     p0.innerHTML=td1.innerHTML
     p1.value=td2.innerHTML
     p2.value=td3.innerHTML
    var btn=document.querySelector('.bao input[type=button]')
    console.log(btn)
 
 
//删除图片，重新添加
//document.querySelector('.bao .p0 img').onclick=function(e){
//	var e=event||window.event
//	var tar=e.target
//	tar.remove()
//	 var imgs=document.querySelectorAll('.imgs ul li img')
//		var arr=["p0.png","p1.png","p2.png","p3.png","p4.png","p5.png"]
//		imgs.forEach(function(a,b){
//			a.onclick=function(){
//			    var p0=document.querySelector('.bao .p0')
//			    var img='<img src="pro/'+arr[b]+'">'
//			    p0.innerHTML='<img src="pro/'+arr[b]+'">'
//			}
//		})
//}
	 //点击保存按钮
   btn.onclick=function(){
    var tds=trs.querySelectorAll('td')
    console.log(btn)
     var p0=document.querySelector('.bao .p0')
    var p1=document.querySelectorAll('.bao input[type=text]')[0]
     var p2=document.querySelectorAll('.bao input[type=text]')[1]
     
     tds[1].innerHTML=p0.innerHTML
     tds[2].innerHTML=p1.value
     tds[3].innerHTML=p2.value
 
     }	
    
 }
//	 点击保存框里边的图片删除然后重新添加新的

//	 点击加减号
 function jia(the){
 	var trs=the.parentNode.parentNode;
 	var num=trs.querySelector('input[type=text]')     
 	console.log(num)
 	num.value=num.value*1+1;
 	zong()
 }	
 	
 
 function jian(the){
 	var trs=the.parentNode.parentNode;
 	var num=trs.querySelector('input[type=text]')
 	console.log(num)
 	num.value=num.value*1-1;
 	if(num.value<1){num.value=1}
 	zong()
 	
 }
// 计算总价
function zong()	{
var zong=0
var trs2=document.querySelectorAll('table tbody tr');
trs2.forEach(function(a,b){
	
	var dan=a.querySelectorAll('td')[3].innerHTML
	console.log(dan)
	var num=a.querySelectorAll('td')[4]
	var num1=num.querySelector('input[type=text]').value
	console.log(num1)
	 a.querySelectorAll('td')[5].innerHTML=(dan*1)*(num1*1)
    
})
}
zong();
//点击全选按钮
var btn1=document.querySelectorAll('.btn input[type=button]')[0]
console.log(btn1)
btn1.onclick=function(){;
var tds=document.querySelectorAll('table tbody tr td input[type=checkbox]')
	tds.forEach(function(a,b){
     a.checked=true;
      
	})
}
 
// 点击反选按钮
  var btn2=document.querySelectorAll('.btn input[type=button]')[1]
console.log(btn1)
btn2.onclick=function(){
var tds=document.querySelectorAll('table tbody tr td input[type=checkbox]')
	tds.forEach(function(a,b){
     a.checked=!a.checked;
      
	})
} 
//点击总价按钮
   
var btn3=document.querySelectorAll('.btn input[type=button]')[2]
btn3.onclick=function(){
	var zong=0;
 var trs=document.querySelectorAll('table tbody tr')
 trs.forEach(function(a){
     var tds=a.querySelector('input[type=checkbox]')
 	console.log(tds)
if(tds.checked==false){return}
var tds5=a.querySelectorAll('td')[5]
var he=a.querySelectorAll('td')[5].innerHTML;
zong+=he*1;
 
})
var btn4=document.querySelector('.btn input[type=text]')
 btn4.value=zong;
 
}
		</script>
	</body>
</html>
